<template>
	<view class="main">
		<view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
			开户
		</view>
		<view class="show">
			<view class="tap">
				<view class="one">
					<span>签约名：</span><input placeholder="请输入签约名" v-model="signName"/>
				</view>
				<view class="one">
					<span>展示名：</span><input placeholder="请输入展示名" v-model="showName"/>
				</view>
				<view class="one">
					<span>法人姓名：</span><input placeholder="请输入法人姓名" v-model="legalPerson" style="width: 67%;"/>
				</view>
				<view class="one">
					<span>法人身份证号：</span><input placeholder="请输入法人身份证号" v-model="legalPersonID" style="width: 58%;"/>
				</view>
				<view class="one">
					<span>所在地区：</span>
					<view class="onefirst" @click="showPicker = true" style="width: 67%;">
						<view v-if="province==''">{{value}}</view>
						<view v-else style="color: #333;">{{value}}</view>
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbright.png"></image>
					</view>
				</view>
				<view class="one">
					<span>详细地址：</span><input placeholder="请输入详细地址" v-model="address" style="width: 67%;"/>
				</view>
				<view class="one">
					<span>联系人：</span><input placeholder="请输入联系人" v-model="linkman"/>
				</view>
				<view class="one">
					<span>联系人电话：</span><input placeholder="请输入联系人电话" v-model="linkPhone" style="width: 62%;"/>
				</view>
				<view class="one">
					<span>邮箱：</span><input placeholder="请输入邮箱" v-model="email" style="width: 75%;"/>
				</view>
				<view class="one">
					<span>银行联行号：</span><input placeholder="请输入银行联行号" v-model="bankCode" style="width: 62%;"/>
				</view>
				<view class="one">
					<span>结算银行卡开户名：</span><input placeholder="请输入结算银行卡开户名" v-model="accountName" style="width: 49%;"/>
				</view>
				<view class="one">
					<span>银行卡号：</span><input placeholder="请输入银行卡号" v-model="accountNo" style="width: 67%;"/>
				</view>
				
				<view class="ktwo">
					<view class="ktwofirsst">结算周期：</view>
					<van-collapse v-model="activeNames">
						<van-collapse-item :title=reason name="1" :title-class="classtap">
							<van-radio-group v-model="radio1" @change="tapbtn">
								<van-radio name="下个工作日">下个工作日</van-radio>
								<van-radio name="下个自然日">下个自然日</van-radio>
							</van-radio-group>
						</van-collapse-item>
					</van-collapse>
				
				</view>
			</view>
		</view>
		<view class="dibu" @click="gobtn()">
			提交
		</view>
		<van-popup v-model="showPicker" round position="bottom" >
		  <van-picker
		    show-toolbar
		    :columns="columns"
			value-key="name"
		    @cancel="showPicker = false"
		    @confirm="onConfirm"
		  />
		</van-popup>
	</view>
</template>

<script>
	
	export default {
		components: {
		},
		mounted() {

		},

		data() {
			return {
				personIdNo:'',//法人身份证
				value: '请选择城市',
				showPicker: false,
				columns: [],//省市区内容
				activeNames: [''],
				radio1: '', //退款原因
				reason: '请选择结算周期类型',
				classtap:'tclass',
				signName:'',//签约名
				showName:'',//展示名
				legalPerson:'',//法人姓名
				legalPersonID:'',//法人身份证号
				province:'',//省
				city:'',//市
				regionCode:'',//区县
				address:'',//详细地址
				linkman:'',//联系人
				linkPhone:'',//联系电话
				email:'',//邮箱
				bankCode:'',//银行联行号
				accountName:'',//结算银行卡开户名
				accountNo:'',//银行卡号
				settleBankType:'TOPRIVATE',//银行卡类型
				settlementPeriod:'',//结算周期
			}
		},
		onLoad(option) {
			this.adress()
			this.personIdNo=option.personIdNo
			this.show()
		},
		onShow() {
			
			
		},
		methods: {
			show(){
				let data={
					personIdNo:this.personIdNo,
					token:uni.getStorageSync('car_userToken')
				}
				this.$base.request('hlb/income/echo', 'POST',data)
					.then(res => {
						if(res.data.code==200){
							let arr=res.data.data
							this.signName=arr.signName
							this.showName=arr.showName
							this.legalPerson=arr.legalPerson
							this.legalPersonID=arr.legalPersonID
							this.province=arr.province
							this.city=arr.city
							this.regionCode=arr.regionCode
							this.address=arr.address
							this.linkman=arr.linkman
							this.linkPhone=arr.linkPhone
							this.email=arr.email
							this.bankCode=arr.bankCode
							this.accountName=arr.accountName
							this.accountNo=arr.accountNo
							this.settleBankType=arr.settleBankType
							this.settlementPeriod=arr.settlementPeriod
							if(this.settlementPeriod=='T1'){
								this.radio1='下个工作日'
							}else if(this.settlementPeriod=='D1'){
								this.radio1='下个自然日'
							}
							this.tapbtn()
							this.classtap='tclass1'
							
						}else{
							this.$toast.fail(res.data.msg)
						}
					})
					.catch(err => {
				
					})
			},
			// 获取省/市/区
			adress(){
				this.$base.request('hlb/income/regincodeup', 'GET')
					.then(res => {
						this.columns=res.data.data
						if(this.regionCode){
							let valuelist=[]
							let codelist=[]
							for(var i=0;i<this.columns.length;i++){
								for(var j=0;j<this.columns[i].children.length;j++){
									for(var k=0;k<this.columns[i].children[j].children.length;k++){
										if(this.columns[i].children[j].children[k].code===this.regionCode){
											valuelist[0]=this.columns[i].name
											valuelist[1]=this.columns[i].children[j].name
											valuelist[2]=this.columns[i].children[j].children[k].name
											codelist[0]=i
											codelist[1]=j
											codelist[2]=k
										}
									}
								}
							}
							this.onConfirm(valuelist,codelist)
						}
					})
					.catch(err => {
				
					})
			},
			//返回上一页
			blackbtn() {
				uni.redirectTo({
					url: '../enter_idcard/enter_idcard'
				})	
			},
			//返回上一页
			blackbtn1() {
				uni.redirectTo({
					url: '../withdrawal_management/withdrawal_management'
				})	
			},
			gobtn(){
				if(this.signName==''||this.showName==''||this.legalPerson==''||this.legalPersonID==''||this.province==''
				||this.city==''||this.regionCode==''||this.address==''||this.linkman==''||this.linkPhone==''||this.email==''
				||this.bankCode==''||this.accountName==''||this.accountNo==''||this.settlementPeriod==''){
					this.$toast.fail('请完善信息')
					return
				}
				let data={
					token:uni.getStorageSync('car_userToken'),
					signName:this.signName,
					showName:this.showName,
					legalPerson:this.legalPerson,
					legalPersonID:this.legalPersonID,
					province:this.province,
					city:this.city,
					regionCode:this.regionCode,
					address:this.address,
					linkman:this.linkman,
					linkPhone:this.linkPhone,
					email:this.email,
					bankCode:this.bankCode,
					accountName:this.accountName,
					accountNo:this.accountNo,
					settleBankType:this.settleBankType,
					settlementPeriod:this.settlementPeriod,
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$base.request('hlb/income/person', 'POST',data)
					.then(res => {
						if(res.data.code==200){
							uni.hideLoading()
							uni.redirectTo({
								url: '../withdrawal_management/withdrawal_management'
							})	
						}else{
							uni.hideLoading()
							this.$toast.fail(res.data.msg)
						}
					})
					.catch(err => {
				
					})
			},
			checkIdCard(idCard) {
			  var errors = []
			  var idCardPattern = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
			  if (!idCardPattern.test(idCard)) {
			    errors.push('身份证号码格式不正确')
				console.log('4444')
			  } else {
			    var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2) 
			    var idCardY  = new Array(1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2)
			    var idCardWiSum = 0
			    for (var i = 0; i < 17; i++) {
			      idCardWiSum += idCardWi[i] * idCard[i]  
			    }
			    var idCardMod = idCardWiSum % 11
			    var idCardLast = idCard[17].toUpperCase() 
			    if (idCardMod != idCardY[idCardLast]) {
			      errors.push('身份证号码校验位不正确')
			    }
				console.log('777')
			  }
			  console.log('4396')
			  if (errors.length > 0) {
			    return false
			  } else {
			    return true
			  }
			},
			TypeInput(e) {
				// 只能输入数字的验证;
				let inputType = /[\W]/g
				this.$nextTick(function() {
					this.personIdNo = e.detail.value.replace(inputType, '');
				})
			},
			//选择省市区确认按钮
			onConfirm(value,code) {
				  var tap=value[0]+' '+value[1]+' '+value[2]
				  this.province=this.columns[code[0]].code
				  this.city=this.columns[code[0]].children[code[1]].code
				  this.regionCode=this.columns[code[0]].children[code[1]].children[code[2]].code
			      this.value = tap;
			      this.showPicker = false;
			},
			tapbtn(){
					this.reason = this.radio1
					this.activeNames = ['']
					this.classtap='tclass1'
					if(this.radio1=='下个工作日'){
						this.settlementPeriod='T1'
					}else if(this.radio1=='下个自然日'){
						this.settlementPeriod='D1'
					}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		overflow-x: hidden;
		// background-color: #F5F5F5;

		/deep/.van-list__finished-text {
			margin-top: 100upx;
			padding-bottom: 200upx;
		}

		/deep/.van-hairline--top-bottom::after {
			border-width: 0;
		}
		/deep/.van-picker__toolbar{
			.van-picker__confirm{
				border: 0upx solid;
				background-color: #FFFFFF;
			}
			.van-picker__cancel{
				border: 0upx solid;
				background-color: #FFFFFF;
			}
		}
		.hand{
			text-size-adjust: 100% !important;
			-webkit-text-size-adjust: 100% !important;  
			-moz-text-size-adjust: 100% !important;
			width: 100%;
			background-color: #4B98ED;
			font-size: 30upx;
			padding: 20upx 0;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			position: relative;
			image{
				width:22upx;
				height: 39upx;
				position: absolute;
				left: 31upx;
				top: 22upx;
			}
		}
		.show{
			width: 100%;
			padding: 0 32upx;
			box-sizing: border-box;
			.tap{
				width: 100%;
				box-sizing: border-box;
				background-color: #f0f0f0;
				border-radius: 20upx;
				.one{
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 16upx;
					.onefirst{
						font-size: 28upx;
						color: #b4b4b4;
						display: flex;
						align-items: center;
						width:71%;
						background-color: #c8c8c8;
						border-radius: 20upx;
						padding: 20upx ;
						font-weight: 700;
						justify-content: space-between;
						image {
							width: 19upx;
							height: 32upx;
						}
					}
					span{
						font-size: 28upx;
						color: #333;
						font-weight: 700;
						margin-right: 32upx;
					}
					input{
						width:71%;
						background-color: #c8c8c8;
						border-radius: 20upx;
						padding: 20upx ;
						font-size: 28upx;
						font-weight: 700;
					}
					/deep/.uni-input-placeholder{
						font-size: 28upx;
						color: #b4b4b4;
					}
				}
				.ktwo {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					padding: 32upx;
					.ktwofirsst{
						font-size: 28upx;
						color: #333;
						font-weight: 700;
						margin-right: 20upx;
					}
					/deep/.van-collapse{
						width: 73%;
					}
					/deep/.van-collapse-item{
						background-color: #c8c8c8;
						border-radius: 20upx;
					}
					/deep/.tclass{
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 700;
						color: #b4b4b4;
					}
					/deep/.tclass1{
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 700;
						color: #333;
					}
					
					/deep/.van-cell {
						padding: 20upx 36upx;
						box-sizing: border-box;
						background: #c8c8c8;
						border-radius: 20upx;
					}
					
					/deep/.van-radio__label {
						font-size: 30upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 700;
						color: #727272;
						margin-left: 90upx;
					}
					
					/deep/.van-radio__icon {
						height: 20upx!important;
						/deep/.van-icon {
							width: 20upx;
							height: 20upx;
							border: 1upx solid #cccccc;
						}
					
						
						margin-left: 80upx;
					}
					/deep/.van-collapse-item__content{
						background-color: #c8c8c8;
						border-radius: 20upx;
						
					}
					/deep/.van-hairline--top-bottom::after{
						border-width: 0upx;
					}
					/deep/.van-radio {
						// margin-bottom: 15upx;
						height: 70upx;
						align-items: center;
					}
					
					/deep/.van-collapse-item__wrapper {
						margin-bottom: 10upx;
					
					}
					/deep/.van-cell:not(:last-child)::after{
						border-bottom: 0upx;
					}
					/deep/.van-radio__icon--checked .van-icon{
						background-color: #4B98ED;
						border-color: #4B98ED;
					}
				
				}
			}
			
			
			
		}
		.dibu{
			width: 600upx;
			border-radius: 20upx;
			background-color: #4B98ED;
			color: #ffffff;
			text-align: center;
			padding: 20upx 0;
			margin: 100upx auto;
		}
		

	}
</style>
